import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

import { BrowserRouter, HashRouter, Routes, Route ,Link} from 'react-router-dom'


function ReactDom() {
  return <>
    <h2>欢迎学习react课程 </h2>
    {/* Link 类似于 一个普通链接 */}
    <Link to="/vite"><button>返回到Vite页面</button></Link>
    <Link to="/"><button>返回到首页方法一</button></Link>
    <Link to=".."><button>返回到首页方法二</button></Link>
  </>
}

function Vite() {
  return <>
    <h2>欢迎学习vite课程</h2>
  </>
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  // 1.histoty路由  使用/react即可访问页面
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}></Route>
      <Route path="/react" element={<ReactDom />}></Route>
      <Route path="/vite" element={<Vite />}></Route>
    </Routes>
  </BrowserRouter>

  //2.使用哈希路由 如果要访问： 必须输入/#/react  才可以进入
  // <HashRouter>
  //   <Routes>
  //     <Route path="/" element={ <App />}></Route>
  //     <Route path="/react" element={ <ReactDom />}></Route>
  //   </Routes>
  // </HashRouter>
)
